<template>
  <component :is="loginLayout[`${appSettings.currentDevice}Login`]">
    <div
      class="form-container"
      :class="`${appSettings.currentDevice}-container`"
    >
      <h2 class="welcome-content">欢迎登录 | Welcome</h2>
      <div class="form-content">
        <el-form label-position="top" label-width="auto" :model="loginData">
          <el-form-item label="登录账号：">
            <el-input
              v-model="loginData.loginAccount"
              placeholder="账号 | 电话 | 邮箱"
            />
          </el-form-item>
          <el-form-item label="登录密码：">
            <el-input
              type="password"
              show-password
              v-model="loginData.loginPassword"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="验证码：">
            <div
              style="display: flex; justify-content: space-between; width: 100%"
            >
              <el-input
                v-model="loginData.verificationCode"
                style="flex: 1"
                placeholder="请输入验证码"
              />
              <el-image
                :src="src"
                style="
                  width: 100px;
                  height: 30px;
                  border-radius: 3px;
                  margin-left: 10px;
                  cursor: pointer;
                "
              />
            </div>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center; width: 100%">
              <el-button
                type="primary"
                style="width: 80%; margin-top: 18px"
                @click="$router.push('/Backend')"
                >登&emsp;录</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer-container">
        <el-button type="primary" link>用户注册</el-button>
        <el-button type="info" link>忘记密码</el-button>
      </div>
    </div>
  </component>
</template>
<script setup name="Login">
import { onMounted, defineAsyncComponent, reactive } from "vue";
import { storeToRefs } from "pinia";
import { useAppSettings } from "@/Stores/appSettings";
const { appSettings } = storeToRefs(useAppSettings());
const loginLayout = {
  MOBILELogin: defineAsyncComponent(() => import("./MobileLogin.vue")),
  PADLogin: defineAsyncComponent(() => import("./PadLogin.vue")),
  DESKTOPLogin: defineAsyncComponent(() => import("./DesktopLogin.vue")),
};
const src =
  "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
const loginData = reactive({
  loginAccount: "",
  loginPassword: "",
  verificationCode: "",
});
onMounted(() => {
  // const el = document.querySelector("html");
  // el.className = "";
});
</script>
<style lang="scss" scoped>
.form-container {
  height: 100%;
  position: relative;
}
.welcome-content {
  text-align: right;
  box-sizing: border-box;
  margin-top: 0;
  position: absolute;
  top: 60px;
  right: 38px;
  text-shadow: 1px 1px 10px #93e0ff;
}
.form-content {
  box-sizing: border-box;
  padding: 0 38px;
  position: absolute;
  bottom: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.footer-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  bottom: 10px;
  left: 8px;
}
.PAD-container {
  .welcome-content {
    top: 18%;
    right: 38px;
    text-shadow: 1px 1px 10px #93e0ff;
  }
  .form-content {
    bottom: 10%;
  }
}
.MOBILE-container {
  height: calc(100% - 300px);
  .welcome-content {
    top: 38px;
    right: 38px;
    text-shadow: 1px 1px 10px #93e0ff;
  }
  .form-content {
    top: 100px;
    form {
      width: 100%;
    }
  }
  .footer-container {
    bottom: 10px;
    left: 8px;
    width: fit-content;
  }
}
:deep(.el-form-item__label) {
  color: #93e0ff;
}
</style>
